<template>
	<view class="diy-info">
		<!-- 个人信息(登录前) -->
		<view class="top-front top-after" v-if="!isLogin">
			<view class="u-flex u-row-between">
				<view class="u-flex">
					<image
						:src="storeInfo && storeInfo.logoImage.preview_url ? storeInfo.logoImage.preview_url : '/static/new/index/logo.png'"
						class="top-img"></image>
					<view>
						<view class="top-black">尊敬的用户</view>
						<view class="top-grey">登录获取20元新人券包</view>
					</view>
				</view>
				<view class="top-btn u-text-pink3" @click="$navTo('pages/login/index')">
					授权登录
				</view>
			</view>
		</view>
		<!-- 个人信息(登录后) -->
		<view class="top-after" v-else>
			<view class="top-num u-flex u-row-between">
				<view class="u-flex">
					<image
						:src="storeInfo && storeInfo.logoImage.preview_url ? storeInfo.logoImage.preview_url : '/static/new/index/logo.png'"
						class="num-img"></image>
					<view>
						<view class="u-flex">
							<view class="top-tel">{{userInfo.mobile || userInfo.nick_name}}</view>
							<view class="top-text" v-if="userInfo.grade">浆果会员</view>
						</view>
						<!-- <view class="u-flex">
							<u-line-progress height="10" :percent="30" :showPercent="false" activeColor="#7ca934"
								inactiveColor="#fdbfc7" class="top-line"></u-line-progress>
							<view class="top-pro u-flex">
								<view class="u-text-pink2">156</view>
								<view class="pro-grey">/1000</view>
							</view>
						</view> -->
					</view>
				</view>
				<view class="u-flex">
					<view class="top-money" @click="$navTo('pages/wallet/index')">
						<view class="mon-black">{{ isLogin ? assets.balance : '--' }}</view>
						<view class="mon-grey">浆果币</view>
					</view>
					<view class="top-money m-l-20" @click="$navTo('pages/points/log')">
						<view class="mon-black">{{ isLogin ? assets.points : '--' }}</view>
						<view class="mon-grey">积分</view>
					</view>
					<view class="top-money m-l-20" @click="$navTo('pages/my-coupon/index')">
						<view class="mon-black">{{ isLogin ? assets.coupon : '--' }}</view>
						<view class="mon-grey">优惠券</view>
					</view>
				</view>
			</view>
			<!-- <view class="top-vip u-text-pink8 u-flex u-row-between">
				<view class="u-flex">
					<image src="@/static/new/index/vip.png" mode="widthFix" class="vip-img"></image>
					<view class="vip-bold">会员特效</view>
					<view class="vip-text">周四加小料，1元小料圈</view>
				</view>
				<u-icon name="arrow-right" size="24" color="#a79297"></u-icon>
			</view> -->

			<view class="business-hours u-flex">
				<image src="/static/new/index/business.png" mode="widthFix"></image>
				营业时间：{{start_time}}-{{end_time}}
			</view>
		</view>

		<!-- <view class="activity u-flex u-row-between">
			<view class="act-item" v-for="item in activityList" @click="$navTo(item.path)">
				<image :src="item.img" mode="widthFix" class="act-img"></image>
				<view class="act-tit">{{item.title}}</view>
				<view class="act-tip">{{item.tip}}</view>
			</view>
		</view> -->
		<!-- 	<view class="activity2 u-flex u-row-between">
			<view class="act-item" v-for="item in activityList" @click="$navTo(item.path)">
				<view class="act-tit">{{item.title}}</view>
				<image :src="item.img" mode="widthFix" class="act-img"></image>
				<view class="act-tip">{{item.tip}}</view>
			</view>
		</view> -->
		<view class="activity3 u-flex u-row-between">
			<view class="act-item" @click="$navTo(item.path)" v-for="item,index in activityList" v-show="index == 0">
				<image :src="item.img" mode="widthFix" class="act-img"></image>
				<view class="act-tit">{{item.title}}</view>
				<view class="act-tip">{{item.tip}}</view>
			</view>
			<view class="shu"></view>
			<view class="act-item" @click="$navTo(item.path)" v-for="item,index in activityList" v-show="index == 1">
				<image :src="item.img" mode="widthFix" class="act-img"></image>
				<view class="act-tit">{{item.title}}</view>
				<view class="act-tip">{{item.tip}}</view>
			</view>
		</view>

		<!-- 大家都在喝 -->
		<view class="hot" v-if="recommendedList.length > 0">
			<view class="hot-tit">
				大家都在喝
			</view>
			<view class="hot-wrap u-flex">
				<view class="hot-item" v-for="item,index in recommendedList" @click="onTargetGoods(item.goods_id)"
					v-show="index < 6">
					<view class="hot-img">
						<image :src="item.goods_image" mode="aspectFill"></image>
					</view>
					<view class="hot-cont">
						<view class="hot-name ">{{item.goods_name}}</view>
						<view class="u-flex u-row-between">
							<view>￥{{item.goods_price_max}}</view>
							<u-icon @click.stop="goCategory(item.goods_id)" name="plus-circle-fill" size="50"
								color="#7ca934"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from '../mixin'
	import * as UserApi from '@/api/user'
	import * as GoodsApi from '@/api/goods'
	import StoreApi from '@/api/store'
	import {
		checkLogin,
	} from '@/core/app'
	import StoreModel from '@/common/model/Store'
	import dayjs from 'dayjs';

	export default {
		props: {

		},
		mixins: [mixin],
		data() {
			return {
				// 活动列表
				activityList: [{
						img: '/static/new/index/activity4.png',
						title: '进群有礼',
						tip: 'With courtesy',
						path: 'pages/index/crowd'
					}, {
						img: '/static/new/index/activity5.png',
						title: '浆果魔法铺',
						tip: 'Magic Shop',
						path: 'pages/index/store/index',
					},
					// {
					// 	img: '/static/new/index/activity2.png',
					// 	title: '每日抽奖',
					// 	tip: '会员免费抽'
					// }, {
					// 	img: '/static/new/index/activity1.png',
					// 	title: '进群有礼',
					// 	tip: '周四免抽单'
					// },
				],
				// 推荐商品
				recommendedList: [],
				// 是否已登录
				isLogin: false,
				// 当前用户信息
				userInfo: {},
				// 首次加载
				isFirstload: true,
				// 账户资产
				assets: {
					balance: '--',
					points: '--',
					coupon: '--'
				},
				// 商城基本信息
				storeInfo: undefined,
				start_time:null,
				end_time:null,
			}
		},
		created() {
			
		},
		methods: {
			// 进页面就走接口
			getIndexInfo() {
				// 判断是否已登录
				this.isLogin = checkLogin()
				this.getUserInfo()
				this.getUserAssets()
				this.getRecommended()
				// 获取商城基本信息
			this.getStoreInfo()
			},
			// 获取当前用户信息
			getUserInfo() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.info({}, {
							load: app.isFirstload
						})
						.then(result => {
							app.userInfo = result.data.userInfo
							resolve(app.userInfo)

						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},
			// 获取账户资产
			getUserAssets() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.assets({}, {
							load: app.isFirstload
						})
						.then(result => {
							app.assets = result.data.assets
							resolve(app.assets)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},
			// 获取商城基本信息
			getStoreInfo() {
				// StoreModel.storeInfo().then(storeInfo => this.storeInfo = storeInfo)
				StoreApi.data().then(result => {
					this.storeInfo = result.data.storeInfo
					this.start_time = result.data.storeInfo.start_time
					this.end_time = result.data.storeInfo.end_time
				})
			},
			// 推荐商品列表
			getRecommended() {
				const app = this
				GoodsApi.recommended()
					.then(result => {
						app.recommendedList = result.data.goodsList
					})
			},
			// 跳转至商品列表页
			onTargetGoods(goodsId) {
				let currentTime = Number(dayjs().format('HHmm'))
				let start_time = Number(this.storeInfo.start_time.replace(':', ''))
				let end_time = Number(this.storeInfo.end_time.replace(':', ''))

				if (this.storeInfo.is_open == 1 && start_time < currentTime && currentTime < end_time) {
					this.$navTo('pages/goods/detail', {
						goodsId
					})
				} else {
					uni.showToast({
						title: '当前时段不在营业时间~',
						icon: 'none'
					})
				}
			},
			//推荐商品-点餐页-商品详情页
			goCategory(id) {
				let currentTime = Number(dayjs().format('HHmm'))
				let start_time = Number(this.storeInfo.start_time.replace(':', ''))
				let end_time = Number(this.storeInfo.end_time.replace(':', ''))

				if (this.storeInfo.is_open == 1 && start_time < currentTime && currentTime < end_time) {
					uni.setStorageSync('indexShopId', id)
					this.$navTo('pages/category/index')
				} else {
					uni.showToast({
						title: '当前时段不在营业时间~',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.diy-info {
		padding: 0 20rpx 20rpx;
		background: #f4f4f6;

		// 个人信息(登录前)
		.top-front {
			padding: 30rpx 25rpx 20rpx 25rpx !important;

			.top-img {
				width: 70rpx;
				height: 70rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.top-black {
				color: #333;
				font-weight: bold;
			}

			.top-grey {
				color: #acaaab;
				font-size: 23rpx;
				margin-top: 5rpx;
			}

			.top-btn {
				color: #fff;
				font-size: 24rpx;
				border-radius: 15rpx;
				padding: 18rpx 25rpx;
				letter-spacing: 2rpx;
			}
		}

		// 个人信息(登录后)
		.top-after {
			background: #fff;
			border-radius: 30rpx;
			margin-top: -70rpx;
			position: relative;
			padding: 5rpx;

			.top-num {
				// padding: 25rpx 15rpx 10rpx 15rpx; 有会员的版本
				padding: 25rpx 15rpx 25rpx 15rpx;

				.num-img {
					width: 70rpx;
					height: 70rpx;
					margin-right: 20rpx;
					border-radius: 50%;
				}

				.top-tel {
					color: #333;
					font-weight: bold;
					margin-right: 10rpx;
				}

				.top-text {
					color: #ab7adf;
					border-radius: 20rpx;
					background: #f9eeff;
					font-size: 24rpx;
					padding: 5rpx 20rpx;
				}

				.top-line {
					width: 285rpx;
					margin-right: 10rpx;
					line-height: 6rpx;
				}

				.top-pro {
					font-size: 22rpx;

					.pro-grey {
						color: #acaaab;
					}
				}

				.top-money {
					text-align: center;

					.mon-black {
						color: #333;
						font-weight: bold;
					}

					.mon-grey {
						color: #acaaab;
						font-size: 24rpx;
						margin-top: 5rpx;
					}
				}

				.m-l-20 {
					margin-left: 20rpx;
				}
			}

			.top-vip {
				padding: 20rpx;
				border-radius: 0 0 30rpx 30rpx;

				.vip-img {
					width: 25rpx;
					margin-right: 10rpx;
				}

				.vip-bold {
					color: #433a35;
					font-weight: bold;
					margin-right: 15rpx;
				}

				.vip-text {
					color: #a79297;
					font-size: 24rpx;
				}
			}

		}

		// 营业时间
		.business-hours {
			width: 96%;
			margin: 0 auto;
			color: #5b5b5b;
			background: #fff;
			font-size: 24rpx;
			margin-top: 15rpx;
			padding: 20rpx 0rpx;
			border-radius: 0 0 30rpx 30rpx;
			border-top: 1rpx solid #eee;

			image {
				width: 45rpx;
				margin-right: 20rpx;
			}
		}


		.activity2 {
			margin-top: 20rpx;

			.act-item {
				width: 48%;
				background: linear-gradient(to bottom, #ffeff3, #ffffff);
				padding: 20rpx;
				height: 170rpx;
				border-radius: 20rpx;
				position: relative;
				color: #333;

				.act-img {
					width: 100rpx;
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
				}

				.act-tit {
					font-weight: bold;
				}

				.act-tip {
					font-size: 22rpx;
					margin-top: 8rpx;
				}
			}
		}

		.activity3 {
			margin-top: 20rpx;
			background: linear-gradient(to bottom, rgba(146, 182, 88, 0.2), #ffffff);
			border-radius: 20rpx;

			.act-item {
				width: 50%;
				text-align: center;
				padding: 30rpx;
				color: #4c4c4c;

				.act-img {
					width: 120rpx;
				}

				.act-tit {
					font-size: 38rpx;
					font-weight: bold;
				}

				.act-tip {
					font-size: 20rpx;
					margin-top: 6rpx;
				}
			}

			.shu {
				width: 1rpx;
				height: 150rpx;
				background: #bdbdbd;
			}
		}

		// 大家都在喝
		.hot {
			margin-top: 20rpx;
			// background: #fbebee;
			background: rgba(146, 182, 88, 0.2);
			border-radius: 30rpx;
			padding: 0 25rpx 25rpx;

			.hot-tit {
				color: #333;
				padding: 20rpx 0;
				font-size: 34rpx;
				font-weight: bold;
			}

			.hot-wrap::-webkit-scrollbar {
				display: none; //隐藏滚动条
			}

			.hot-wrap {
				overflow-x: auto;
				scroll-padding: 0px; // 可选，增加滚动时的边距 
				scroll-snap-type: x mandatory; // 强制水平滚动到最近的“snap点” 

				.hot-item {
					width: 300rpx;
					background: #fff;
					overflow: hidden;
					margin-right: 20rpx;
					border-radius: 15rpx;
					border: 1px solid #7ca934;
					flex: 0 0 auto; //不允许项目伸缩 
					scroll-snap-align: start; // 让每个项目在滚动时都“粘”在左边

					&:last-child {
						margin-right: 0;
					}

					.hot-img {
						width: 100%;

						image {
							width: 100%;
							height: 300rpx;
						}
					}

					.hot-cont {
						padding: 20rpx 25rpx;

						.hot-name {
							font-size: 27rpx;
							margin-bottom: 4rpx;

							white-space: nowrap;
							/* 强制文本不换行 */
							overflow: hidden;
							/* 超出部分隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
						}
					}
				}
			}
		}
	}
</style>